<extend name="./public/frame.html"/>
<block name="content">
    <style>
        .layui-form-label {width: 10%;}
        .layui-input-block {margin-left: 12%;}
    </style>
    <form class="layui-form layui-form-pane1" action="" method="post" enctype="multipart/form-data">
        <div class="layui-form-item">
            <label class="layui-form-label">列表标题</label>
            <div class="layui-input-block">
                <input type="text" name="title" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">主标题</label>
            <div class="layui-input-block">
                <input type="text" name="main_title" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">公告内容</label>
            <div class="layui-input-block">
                <script name="content" id="editor" type="text/plain" style="width:960px;height:300px;"></script>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否置顶</label>
            <div class="layui-input-block">
                <input type="radio" name="is_top" value="0" title="否" checked>
                <input type="radio" name="is_top" value="1" title="是">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">城市选择</label>
            <div class="layui-input-block">
                <select name="cs_type" class="select class-select" lay-filter="cs_type" id="cs_type">
                    <option value="0">全国</option>
                    <option value="1">选择省市</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item inputModel">
            <label class="layui-form-label">推送城市</label>
            <div class="layui-input-inline" style="width: 800px;">
                <table class="layui-table" style="width: 900px">
                    <tr class="province01" style="display: none;">
                        <td style="width: 100px">省级区域</td>
                        <td>
                            <input type="checkbox" value="all" title="全部" class="province_all pro"
                                   lay-filter="province">
                            <volist name="provinces" id="province">
                                <input type="checkbox" name="region[2][]" title="{$province}" value="{$key}"
                                       class="lay-input province_child province pro" lay-filter="province">
                            </volist>
                        </td>
                    </tr>
                    <tr class="city01" style="display: none">
                        <td>市级区域</td>
                        <td>
                            <ul id="city">
                                <volist name="edit_provinces" id="edit_pro">
                                    <php>$pid = $key; $class = 'city_'.$pid;</php>
                                    <li class="{$class} region_li">
                                        <input type="checkbox" value="all" data-pid="{$pid}" title="{$edit_pro}"
                                               class="lay-input city_all_{$pid}" {$city_all[$pid]?'checked':''}>
                                        <volist name="$edit_citys[$pid]" id="city">
                                            <input type="checkbox" name="region[3][{$pid}][]" data-pid="{$pid}"
                                                   title="{$city}" value="{$key}"
                                                   class="lay-input city_child_{$pid} city"
                                            <if condition="in_array($key,$info['region'][3][$pid])">checked</if>
                                            >
                                        </volist>
                                    </li>
                                </volist>
                            </ul>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">司机类型</label>
            <div class="layui-input-block">
                <input type="checkbox" value="1" name="driver_type[]" title="快车">
                <input type="checkbox" value="2" name="driver_type[]" title="城际">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">目标用户</label>
            <div class="layui-input-block">
                <text class="panduan1"><input type="checkbox" value="1" class="target1" name="target[]"
                                              lay-filter="target3" title="已认证"></text>
                <text class="panduan2">
                    <input type="checkbox" value="4" class="target" lay-filter="tdyh" name="target[]" title="特定用户">
                </text>
            </div>
        </div>
        <div class="layui-form-item inputModel phone"  style="display: none">
            <label class="layui-form-label">导入手机号码</label>
            <div class="layui-input-inline" style="width: 200px;">
                <button type="button" class="layui-btn uploads">导入号码</button>
                <a href="<?php echo $url;?>" style="color: green;margin-left: 20px;">电话号码模板 - 下载</a>
            </div>
        </div>
        <div class="layui-form-item inputModel phone" style="display: none">
            <label class="layui-form-label">补发手机号码(,[逗号]分割)</label>
            <div class="layui-input-block inside_price">
                <textarea name="phonearea" id="" cols="30" rows="10">{$phone}</textarea>
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">发布时间</label>
            <div class="layui-input-block">
                <input type="radio" name="time" value="0" title="实时" checked>
                <input type="radio" name="time" value="1" title="定时">
                <div class="layui-inline">
                    <input type="text" class="layui-input" name="add_time" id="add_time" placeholder="发布开始时间">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="submit">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
    <script>
        layui.use(['laydate', 'upload', 'form', 'laydate'], function () {
            var laydate = layui.laydate
                , upload = layui.upload
                , form = layui.form
            ;
            form = layui.form, upload = layui.upload;
            level = 3, pro_tmp = [], cit_tmp = [], cou_tmp = [];
            laydate.render({
                elem: '#add_time' //指定元素
                , type: 'datetime'
            });
            $(".panduan1").on('click', function (data) {
                console.log($('.target1'))
                console.log($(".target1").prop("disabled"))
                if ($(".target1").prop("disabled") == true) {
                    layer.msg("请先取消特定用户");
                }

            })
            $(".panduan2").on('click', function (data) {
                console.log(222)
                console.log($('.target'))
                if ($(".target").prop("disabled") == true) {
                    layer.msg("请先取消已认证");
                }
            })

            form.on('select(cs_type)', function (data) {
                console.log(data)
                if (data.value == 1) {
                    $('.province01').show();
                    $('.city01').show();
                } else {
                    $('.province01').css('display', 'none');
                    $('.city01').css('display', 'none');
                }

            });
            upload.render({ //允许上传的文件后缀
                elem: '#test3'
                , auto: false
                , field: 'apk'
                , accept: 'file' //普通文件
                , exts: 'apk' //只允许上传安装文件
                , choose: function (obj) {
                    obj.preview(function (index, file, result) {
                        var str = "<span style='margin-left: 5px'>" + file.name + "</span>";
                        $('#test3').after(str);
                    });
                }
            });
            upload.render({
                elem: '.uploads'//这个就等同于点击
                , accept: 'file'
                , url: '/admin/Upload/excelUpload'
                , done: function (res) { //上传后的回调
                    if (res.status == 1) {
                        layer.msg('导入成功', {icon: 1});
                        var html = '';
                        var i = $('.inside_price').length;
                        $.each(res.CHILD, function () {
                            console.log(this)
                                html += '<input type="text" name="phone[]" value="'+this+'" placeholder="用户手机号码" class="layui-input" style="width: 200px;" onkeyup="num(this)">\n'

                        })
                        console.log(html)
                        $(".inside_price").append(html);
                    } else {
                        layer.msg(res.msg);
                    }
                }
                , error: function (e) {
                    console.log(e)
                }
            });


            form.on('checkbox(tdyh)', function (data) {
                $('.phone').show();
                $(".target1").attr('disabled', true)
                var elem = data.elem;
                var check = elem.checked;
                if (!check) {
                    $('.phone').css({display: "none"});
                    $(".target1").attr('disabled', false)
                }
            });


            form.on('checkbox(target1)', function (data) {
                $(".target").attr('disabled', true)
                var elem = data.elem;
                var check = elem.checked;
                if (!check) {
                    $(".target").attr('disabled', false)
                }
            });

            form.on('checkbox(target2)', function (data) {
                $(".target").attr('disabled', true)
                var elem = data.elem;
                var check = elem.checked;
                if (!check) {
                    $(".target").attr('disabled', false)
                }
            });
            form.on('checkbox(target3)', function (data) {
                $(".target").attr('disabled', true)
                var elem = data.elem;
                var check = elem.checked;
                if (!check) {
                    $(".target").attr('disabled', false)
                }
            });

            form.on('checkbox(province)', function (data) {

                $('.city01').show();
                var elem = data.elem, value = data.value, check = elem.checked, all = $('.province_all'),
                    item = $('.province_child'), index = 0, flag = false, pro = [];
                console.log(check)
                switch (value) {
                    case 'all':
                        item.each(function () {
                            $(this).prop({'checked': check});
                            var ind = pro_tmp.indexOf($(this).val());
                            if (ind == -1) {
                                pro.push($(this).val());
                                pro_tmp.push($(this).val());
                            }
                        });
                        if (!check) {
                            pro = [];
                            pro_tmp = [];
                            $('#city').html('');
                            $('#county').html('');
                            $('#city_').hide();
                            $('#county_').hide();
                        }
                        break;
                    default:
                        item.each(function () {
                            if ($(this).prop('checked')) {
                                index++;
                            }
                        });
                        if (index == item.length) {
                            flag = true;
                        }
                        all.prop({'checked': flag});
                        if (!check) {
                            var ind = pro_tmp.indexOf(value);
                            if (ind > -1) {
                                pro_tmp.splice(ind, 1);
                            }
                            console.log(value)
                            $('._' + value).remove();
                            if ($('#city').children('li').length == 0) {
                                $('#city_').hide();
                            }
                            if ($('#county').children('li').length == 0) {
                                $('#county_').hide();
                            }
                        } else {
                            pro = [];
                            pro.push(value);
                            pro_tmp.push(value);
                        }
                        break;
                }
                form.render('checkbox');
                if (pro.length > 0 && level > 2) {
                    ajax(form, layer, pro, 2, 'city');
                }
            });
            form.on('checkbox(city)', function (data) {
                var elem = data.elem, value = data.value, check = elem.checked,
                    all = $('.city_all_' + $(elem).data('pid')),
                    item = $('._child_' + $(elem).data('pid')), index = 0, flag = false, cit = [];
                switch (value) {
                    case 'all':
                        item.each(function () {
                            $(this).prop({'checked': check});
                            var ind = cit_tmp.indexOf($(this).val());
                            if (ind == -1) {
                                cit.push($(this).val());
                                cit_tmp.push($(this).val());
                            }
                        });
                        if (!check) {
                            cit = [];
                            cit_tmp = [];
                            $('#county').html('');
                            $('#county_').hide();
                        }
                        form.render('checkbox');
                        break;
                    default:
                        item.each(function () {
                            if ($(this).prop('checked')) {
                                index++;
                            }
                        });
                        if (index == item.length) {
                            flag = true;
                        }
                        if (!check) {
                            var ind = cit_tmp.indexOf(value);
                            if (ind > -1) {
                                cit_tmp.splice(ind, 1);
                            }

                        } else {
                            cit = [];
                            cit.push(value);
                            cit_tmp.push(value);
                        }
                        all.prop({'checked': flag});
                        form.render('checkbox');
                }

            });

        });

        function ajax(form, layer, pid, level, id) {
            $.post('{$url2}', {pid: pid.join(','), level: level}, function (res) {
                switch (res['status']) {
                    case 1:
                        $('#' + id).append(res['html']);
                        form.render('checkbox');
                        $('#' + id + '_').show();
                        break;
                    default:
                        layer.alert(res['msg'], {icon: 5});
                        break;
                }
            }, 'json')
        }


        function insidePrice() {
            var i = $('.inside_price').length;
            console.log(i)
            i++;
            var html =
                '\n' +
                '<input type="text" name="phone[]" id="phone_0' + i + '" value="" placeholder="用户手机号码" class="layui-input" style="width: 200px;float: left;" onkeyup="num(this)">';
            $(".inside_price").append(html);
        }

    </script>
    <script type="text/javascript" charset="utf-8" src="/public/editor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="/public/editor/ueditor.all.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="/public/editor/lang/zh-cn/zh-cn.js"></script>
    <script type="text/javascript">
        var ue = UE.getEditor('editor', {
            zIndex: 0,// z轴
        });
    </script>
</block>
